<template>
  <div class="table">
    <div class="left-cont" id="left-cont">
      <div class="left-top-area" id="left-top-area">
        <ul>
          <li
            :class="nowAreaIndex == -1 ? 'active' : ''"
            @click="getThisAreaTable(0, -1)"
          >
            <span class="area-name"
              >全部区域({{ totalBusyCount }}/{{ totalCount }})</span
            >
          </li>
          <li
            v-for="(item, index) in parList"
            :key="index"
            :class="nowAreaIndex == index ? 'active' : ''"
            @click="getThisAreaTable(item, index)"
          >
            <span class="area-name">{{ item.name }}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="clear-left-cont"></div>
    <div class="right-cont" id="table-list-wrap">
      <div class="table-list">
        <div class="desk" v-for="(item, index) in tableList" :key="index">
          <h3 class="par-name">
            {{ item.name }}
          </h3>
          <ul v-if="item.nums && Array.isArray(item.nums) && item.nums.length">
            <li
              @click.stop="toBook(deskItem)"
              v-for="(deskItem, deskIndex) in item.nums"
              :key="deskIndex"
            >
              <div :class="deskHeadCss[deskItem.status]">
                <div class="table-name">{{ deskItem.name }}</div>
                <span class="table-time">{{
                  statusFormat[deskItem.status]
                }}</span>
              </div>
            </li>
          </ul>
          <div class="no-table" v-else>此区暂无机位</div>
        </div>
      </div>
    </div>
    <!--  -->
    <div class="mask" v-if="showMask">
      <span>数据更新失败，请联系吧台，重启收银端！</span>
    </div>
    <!--  -->
    <div
      class="status-mask"
      v-if="showStatusMask"
      @click.stop="showStatusMask = false"
    >
      <div class="status-wrap" @click.stop="">
        <button v-if="!showSelTime" @click.stop="book">订座</button>
        <div class="sel-time" v-if="showSelTime">
          <ul>
            <li
              v-for="(it, ind) in timeArr"
              @click.stop="selTime(it)"
              :key="ind"
            >
              {{ it }}分钟
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { url } from "@/router/url.js";
import { API_BASE_URL } from "../../urlConfig/index";
export default {
  data() {
    return {
      dateOpen:false,
      showStatusMask: false,
      showSelTime: false,
      timeArr: [],
      showMask: false,
      deskHeadCss: {
        0: "table-item-wrap free",
        1: "table-item-wrap busy",
        2: "table-item-wrap book",
      },
      storeId: "",
      tableList: [],
      nowAreaIndex: -1,
      parList: [],
      totalCount: 0,
      totalFreeCount: 0,
      totalBusyCount: 0,
      statusFormat: {
        0: "空闲中",
        1: "占用中",
        2: "已订座",
      },
    };
  },
  watch: {
    showStatusMask(val) {
      if (!val) {
        this.showSelTime = false;
      }
    },
  },
  methods: {
    getThisAreaTable(item, index) {
      this.nowAreaIndex = index;
      if (index == -1) {
        this.tableList = [...this.parList];
        return;
      }
      this.tableList = [item];
    },
    getPar() {
      this.$http({
        url: "region/list",
        method: "POST",
        data: {
          storeId: this.storeId,
        },
      }).then((res) => {
        if (res.data && Array.isArray(res.data) && res.data.length) {
          let tempNums = null;
          let totalCount = 0;
          let totalFreeCount = 0;
          let totalBusyCount = 0;
          let updateTime = 0;
          res.data.forEach((it) => {
            if (it.nums && Array.isArray(it.nums) && it.nums.length) {
              it.freeCount = 0;
              it.busyCount = 0;
              it.nums.forEach((ite) => {
                if(ite.status!=2){
                  updateTime = new Date(ite.updateTime).getTime();
                }
                totalCount++;
                if (ite.status == 0) {
                  it.freeCount++;
                  totalFreeCount++;
                }
                if (ite.status == 1 || ite.status == 2) {
                  it.busyCount++;
                  totalBusyCount++;
                }
              });
              tempNums = it.nums;
            }
          });
          if (tempNums && Array.isArray(tempNums) && tempNums.length) {
            let nowTime = new Date().getTime();
            // let updateTime = new Date(tempNums[0].updateTime).getTime();
            console.log(nowTime - updateTime);
            if (nowTime - updateTime > 2 * 60 * 1000) {
              // this.showMask = true;
            } else {
              this.showMask = false;
            }
          }
          this.totalCount = totalCount;
          this.totalFreeCount = totalFreeCount;
          this.totalBusyCount = totalBusyCount;
          this.parList = res.data;
          if (this.nowAreaIndex != -1) {
            this.tableList = [res.data[this.nowAreaIndex]];
          } else {
            this.tableList = [...res.data];
          }
        } else {
          this.parList = [];
          this.tableList = [];
        }
      });
    },
    toBook(item) {
      console.log(item);
      if (item.status == 0 && this.dateOpen) {
        this.nowSelBookItem = item;
        this.showSelTime = false;
        this.showStatusMask = true;
      }
    },
    selTime(it) {
      let flag = window.confirm("确认预订？");
      if(!flag){
        return;
      }
      let extendTime = it * 60 * 1000;
      let dateExpiredTime = new Date().getTime() + extendTime;
      console.log(new Date(dateExpiredTime).Format("yyyy-MM-dd hh:mm:ss"));
      this.$http({
        url: "update/num",
        method: "POST",
        data: {
          numIds: [this.nowSelBookItem.id],
          status: 2,
          dateExpiredTime: new Date(dateExpiredTime).Format(
            "yyyy-MM-dd hh:mm:ss"
          ),
        },
      })
        .then((res) => {
          this.getPar();
          this.showStatusMask = false;
        })
        .catch((err) => {});
    },
    book() {
      if(!this.timeArr || !this.timeArr.length){
        this.selTime(24*60);
        return;
      }
      this.showSelTime = true;
    },
    getTime() {
      this.$http({
        url: "store-region-config",
        method: "GET",
        params: {
          storeId: this.storeId,
        },
      }).then((res) => {
        this.dateOpen = res.data.dateOpen;
        if (res.data.minutes) {
          this.timeArr = JSON.parse(res.data.minutes);
        }
      });
    },
  },
  created() {
    if (localStorage.getItem("phone")) {
      this.phone = localStorage.getItem("phone");
      this.empId = localStorage.getItem("empId");
    }
  },
  mounted() {
    this.storeId = localStorage.getItem("storeId");
    this.getTime();
    this.getPar();
    this.timer = setInterval(() => {
      // this.nowAreaIndex = -1;
      this.getPar();
    }, 5 * 1000);
    this.$nextTick(() => {
      this.$createScroll("table-list-wrap");
    });
  },
  destroyed() {
    clearInterval(this.timer);
  },
};
</script>

<style scoped lang="scss">
@import "./region.scss";
.status-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  .status-wrap {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    button {
      width: 80%;
      border: none;
      height: 0.9rem;
      border-radius: 0.45rem;
      color: #fff;
      font-size: .32rem;
      background-color: #e66a6a;
    }
    .sel-time {
      width: 100%;
      text-align: center;
      height: 100%;
      overflow: hidden;
      overflow-y: auto;
    }
    ul {
      width: 100%;
      li {
        width: 100%;
        padding: 0.5rem 0;
        border-bottom: 1px solid #ddd;
      }
    }
  }
}
</style>
